<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>注册</title>
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/login.css" />
    <link rel="stylesheet" href="../plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../plugins/layer/skin/layer.css">
    <link rel="stylesheet" href="../plugins/elementui/index.css">



    <!-- 验证码 -->
    <style>
        .verify {
            width: 95px;
            position: absolute;
            right: 0;
            top: 0px;
            cursor: pointer;
            height: 46px;
            font-size: 14px;
            text-align: center;
            line-height: 46px;
            background-color: rgb(50, 165, 231);
            color: black;
        }
        
         ::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>

<body>

    <div id="content" class="content">
        <div class="banner-box">
            <form id="mainForm" class="main-form" enctype="application/x-www-form-urlencoded" novalidate="novalidate">
                <div class="tab-title">
                    <a class="linkAGray" id="toAccountLogin" href="login.html">账号登录</a
                >
                <span class="register-line"></span>
                <a class="linkABlue" id="toVCodeLogin" href="register.html"
                >账号注册</a
                >
            </div>

            <div id="errorMsg" class="tip-box visiblility-hidden">
                <i class="err-ico"></i>
                <span class="tip-font" id="tipMsg">请填写完整的注册信息</span>
                <span id="closeErrorMsg" class="close-ico"></span>
            </div>
            <div class="normalInput fieldInput">
                <input
                        v-model="register.userName"
                        type="text"
                    class="inp-focus"
                    name="user-name"
                    id="user-name"
                    maxlength="10"
                    autocomplete="off"
                    placeholder="用户名"
                    onfocus="closeErrorMsg()"
                >
            </div>
            <div class="normalInput fieldInput">
                <input
                        v-model="register.password"
                        type="password"
                        class="inp-focus"
                        name="password"
                        id="password"
                        maxlength="10"
                        autocomplete="off"
                        placeholder="密码"
                        onfocus="closeErrorMsg()"
                >
            </div>
            <div class="normalInput fieldInput">
                <input
                        type="password"
                        class="inp-focus"
                        name="password-is"
                        id="password-is"
                        maxlength="10"
                        autocomplete="off"
                        placeholder="确认密码"
                        onfocus="closeErrorMsg()"
                >
            </div>

            <div class="normalInput cycode-box fieldInput">
                <div class="cycode-selectbox">
                    <input
                            v-model="register.telephone"
                            class="ipt-account inp-focus"
                            name="telephone"
                            id="telephone"
                            maxlength="50"
                            placeholder="手机号码"
                            autocomplete="off"
                            onfocus="closeErrorMsg()"
                    />
                </div>
            </div>

            <div class="normalInput cycode-box fieldInput" id="cycode-box">
                <div class="cycode-selectbox">
                    <input
                            v-model="register.email"
                            class="ipt-account inp-focus"
                            name="email"
                            id="email"
                            maxlength="50"
                            placeholder="邮箱"
                            autocomplete="off"
                            onfocus="closeErrorMsg()"
                    />
                </div>
            </div>

            <div class="normalInput fieldInput" style="display: none">
                <input
                        v-model="register.verificationcode"
                        type="text"
                        class="inp-focus"
                        name="Verificationcode"
                        id="Verificationcode"
                        maxlength="16"
                        autocomplete="off"
                        placeholder="验证码"
                        onfocus="closeErrorMsg()"
                />
                <span id="verifyCode" class="verify" onclick="sendsms(this);"
                >获取验证码</span
                >
            </div>

            <a id="register" class="fullBtnBlue">注册</a>
            </form>
            </div>
        </div>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="../js/jquery.cookie.js"></script>
        <script type="text/javascript" src="../plugins/layui/layui.js"></script>
        <script type="text/javascript" src="../plugins/layer/layer.js"></script>
        <script src="../js/vue.js"></script>
        <script src="../js/axios-min.js"></script>
        <script src="../plugins/elementui/index.js"></script>
        <script>
            var vue = new Vue({
                el: "#content",
                data: {
                    register: {
                        userName: "",
                        password: "",
                        email: "",
                        telephone: "",
                        verificationcode: ""
                    }
                },
                methods: {
                    submit() {
                        this.$message.success("正在注册.....")
                        axios.post("/user/register", this.register).then(
                            res => {
                                var resp = res.data
                                if (resp.code == "200") {
                                    this.success()
                                } else {
                                    alert("注册失败")
                                    this.$message.error("用户名已存在，请重新注册")
                                }
                            }
                        )
                    },
                    success() {
                        this.$message.success("注册成功!即将为您跳转到登录界面....")
                        window.setTimeout(() => {
                            window.location.href = "login.html"
                        }, 2000)
                    }
                },
                created() {

                }

            })

            //点击注册事件
            $("#register").click(function() {
                var email = $("#email").val();
                var Verificationcode = $("#Verificationcode").val(); //输入的验证码
                var username = $("#user-name").val();
                var password = $("#password").val();
                var telephone = $("#telephone").val()
                var password_is = $("#password-is").val();

                if (username == "" || password == "" || password_is == "" || email == "") {
                    var msg = document.getElementById("errorMsg");
                    $("#tipMsg").html("请填写完整的注册信息！");
                    msg.setAttribute("class", "tip-box visiblility-show");
                    return;
                }

                //用户名校验
                var reg = /^[A-Za-z0-9]{4,10}$/;
                var t = username.match(reg);
                if (t == null) {
                    //提示错误信息
                    var msg = document.getElementById("errorMsg");
                    $("#tipMsg").html("请填写由4-10位数字或者字母组成的用户名")
                    msg.setAttribute("class", "tip-box visiblility-show")
                    return;
                }

                //密码校验
                var reg = /^\w{6,15}$/;
                var t = password.match(reg);
                if (t == null) {
                    //提示错误信息
                    var msg = document.getElementById("errorMsg");
                    //修改提示文字
                    $("#tipMsg").html("请填写正确的6-15位密码<br>只能包含字母、数字和下划线");
                    msg.setAttribute("class", "tip-box visiblility-show");
                    return;
                } else {
                    if (password != password_is) {
                        //提示错误信息
                        var msg = document.getElementById("errorMsg");
                        //修改提示文字
                        $("#tipMsg").html("密码与确认密码不一致");
                        msg.setAttribute("class", "tip-box visiblility-show");
                        return;
                    }
                }

                //手机号校验
                var reg = /((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/;
                var t = telephone.match(reg);
                if (t == null) {
                    //提示错误信息
                    var msg = document.getElementById("errorMsg");
                    //修改提示文字
                    $("#tipMsg").html("请填写正确的手机号码！");
                    msg.setAttribute("class", "tip-box visiblility-show");
                    return;
                }

                //邮箱校验
                var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                var t = email.match(reg);
                if (t == null) {
                    //提示错误信息
                    var msg = document.getElementById("errorMsg");
                    //修改提示文字
                    $("#tipMsg").html("请填写正确的邮箱！");
                    msg.setAttribute("class", "tip-box visiblility-show");
                    return;
                }

                //发送ajax请求
                vue.submit();
            });

            //点击错误信息关闭按钮
            $("#closeErrorMsg").click(function() {
                var obj = document.getElementById("errorMsg");
                obj.setAttribute("class", "tip-box visiblility-hidden");
            });

            //关闭错误提示
            function closeErrorMsg() {
                var obj = document.getElementById("errorMsg");
                obj.setAttribute("class", "tip-box visiblility-hidden");
            }

            //发送验证码函数
            function sendsms(e) {
                var email = $("#email").val();
                if (email == "") {
                    //提示错误信息
                    var obj = document.getElementById("errorMsg");
                    //修改提示文字
                    $("#tipMsg").html("请填写正确的邮箱！");
                    obj.setAttribute("class", "tip-box visiblility-show");
                    return;
                }
                //邮箱校验
                var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                var t = email.match(reg);
                if (t == null) {
                    //提示错误信息
                    var obj = document.getElementById("errorMsg");
                    //修改提示文字
                    $("#tipMsg").html("请填写正确的邮箱！");
                    obj.setAttribute("class", "tip-box visiblility-show");
                    return;
                }

                // TODO 发送ajax请求，后台发送邮件
                $.ajax({
                    type: "POST",
                    url: "register.action",
                    data: "email=" + email,
                });

                /*发送验证码功能*/
                countdown(e); //若发送验证码成功，则调用倒计时函数
            }
            //倒计时函数
            var time = 10;

            function countdown(e) {
                if (time == 0) {
                    e.setAttribute("onclick", "sendsms(this)");
                    $("#verifyCode").html("获取验证码");
                    //颜色恢复
                    var mychar = document.getElementById("verifyCode");
                    mychar.style.backgroundColor = "rgb(50,165,231)";
                    time = 10;
                } else {
                    //设置背景为灰色
                    var mychar = document.getElementById("verifyCode");
                    mychar.style.backgroundColor = "rgb(169,169,169)";

                    e.removeAttribute("onclick");
                    $("#verifyCode").html("重新发送(" + time + ")");
                    time--;
                    setTimeout(function() {
                        countdown(e);
                    }, 1000);
                }
            }
        </script>
</body>

</html>